<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>综合服务 评分页面</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
    <!--JQ-->
    <script type="text/javascript" charset="utf-8"
            src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
    <!--Layui-->
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <!--公用样式JS-->
    <script type="text/javascript" src="${re.contextPath}/plugin/common/js/comment.js" charset="utf-8"></script>
    <style>
        .layui-laypage-limits > select {
            width: 100% !important;
        }

        .foot_btn {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
        }

        .foot_btn span {
            padding: 5px 10px;
            border: 1px solid #828282;
            border-radius: 3px;
        }

        .foot_btn .btn_back {
            margin-right: 100px;
            color: #828282;
        }

        .foot_btn .btn_submit {
            margin-left: 100px;
            background: #3e7ce7;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
<!--容器-->


<div class="layui-container"
     style="background-color: #ffffff;width:96%;margin-top:30px;padding:16px;border-radius: 10px">
    <div class="layui-row" style="width: 100%;">
        <input name="examId" value="${examId}" style="display: none;"/>
        <input name="stuExamId" value="${stuExamId}" style="display: none;"/>
        <#list st as vo>
            <div style="padding-bottom: 20px;border-bottom: 1px solid #6666">
                <h4>${vo.orderNo}.${vo.content}</h4>
                <input name="detail[${vo.orderNo}].quId" value="${vo.quId}" style="display: none;"/>
                <div>
                    <p>考生答案：</p>
                    <textarea style="width: 100%;resize:none;" disabled="disabled">${vo.ownAnswer}</textarea>
                </div>
                <div>
                    <p>正确答案：</p>
                    <textarea style="width: 100%;resize:none;" disabled="disabled">${vo.answer}</textarea>
                </div>
                <div>
                    <p>答案解析：</p>
                    <textarea style="width: 100%;resize:none;" disabled="disabled">${vo.analysis}</textarea>
                </div>
                <div style="overflow: hidden;">
                    <div style="width: 50%;float: left;">该题总分：${vo.score}</div>
                    <div style="width: 50%;float: left;">考生得分：<input name="detail[${vo.orderNo}].score" value=""
                                                                     oninput="enterScore(this,'${vo.score}')"
                        /></div>
                </div>
            </div>
        </#list>
        <div class="foot_btn">
            <span onclick="back()" class="btn_back">返回</span>
            <span onclick="submit()" class="btn_submit">确定</span>
        </div>
    </div>

</div>
<script type="text/javascript" src="${re.contextPath}/pageoffice.js" id="po_js_main"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script>
    var layer;
    let tableIns;
    let table;
    $(function () {
        layui.use(['table'], function () {
            table = layui.table;
        })
    })

    //取消
    function closes() {
        let index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    //添加
    function add() {
        let data = table.checkStatus('tableList').data;
        let ids = [];
        for (let i = 0; i < data.length; i++) {
            ids.push(data[i].id);
        }
        let json = {
            ids: ids,
            examId: $("#examId").val()
        }
        layerAjaxGet("/exam/list/insertExStuExam", json, "", function (d) {
            if (d.flag) {
                layer.msg("操作成功!", {icon: 1});
                let index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            } else {
                layer.msg("操作失败!", {icon: 2});
            }
        })
    }

    function enterScore(obj, score) {
        obj.setAttribute('value', obj.value);
        checkInteger(obj, score);
    }

    let temp = /^\d+$/; // 非负整数
    function checkInteger(obj, score) {
        if (!temp.test(obj.value)) {
            layer.msg('得分只能为整数');
            obj.value = '';
        } else if (parseInt(obj.value) > parseInt(score)) {
            layer.msg('得分不能大于总分');
            obj.value = '';
        } else {
            return
        }
    }

    let obj = {};

    function getInputBox() {
        let tagElements = document.getElementsByTagName('input');
        for (let i = 0; i < tagElements.length; i++) {
            if (tagElements[i].name) {
                Object.assign(obj, {[tagElements[i].name]: tagElements[i].value})
            }
        }
    }

    function loopObject() {
        let nonempty = true;
        for (let k in obj) {
            if (!obj[k] && k.indexOf('score')) {
                nonempty = false;
                break;
            }
        }
        return nonempty
    }

    function submit() {
        getInputBox();
        if (loopObject()) {
            layerAjax('/give/mark/updateScore', obj, '', res => {
                if (res.flag) {
                    layer.msg("提交成功!", {icon: 1});
                    setTimeout(() => {
                        closes();
                    }, 1000)
                } else {
                    layer.msg("提交出错了!", {icon: 2});
                }
            })
        } else {
            layer.msg('还有未评分的题目');

        }
    }

    function back() {
        closes();
    }

</script>
</body>
</html>
